<template>
  <div class="main">
    <div class="left">
      <div class="lt">
        <div class="use">
          <p>【昵称：{{ userData.name }}】</p>
          <p>【等级：{{ userData.level }}】【经验：{{ userData.jinyan }}%】</p>
          <p>【生命值：{{ userData.smz }}】【魔法值：{{ userData.mfz }}】</p>
          <p>
            【攻击力：{{ userData.gjl1 }}-{{ userData.gjl2 }}】【法术强度：{{
              userData.fsqd1
            }}-{{ userData.fsqd2 }}】
          </p>
          <p>【护甲：{{ userData.hj }}】【魔抗：{{ userData.mk }}】</p>
          <p>
            【暴击率：{{ userData.bjl }}%】【暴击伤害：{{ userData.bjsh }}%】
          </p>
          <p>
            【每秒攻击速度：{{ userData.mmgjsd }}】【技能冷却缩减：{{
              userData.jnlqsd
            }}%】
          </p>
          <p>【闪避：{{ userData.sb }}】【移动速度：{{ userData.ydsd }}】</p>
          <p>【幸运：{{ userData.xy }}】【声望：{{ userData.sw }}】</p>
          <p>【耐力：{{ userData.nl }}】【力量：{{ userData.ll }}】</p>
          <p>【精神：{{ userData.js }}】【敏捷：{{ userData.mj }}】</p>
        </div>
        <div class="bb">
          <p class="title">[存储空间]</p>
          <div class="bbc">
            <div class="bb-i" v-for="(i, o) in bbsl" :key="o">
              <el-tooltip
                effect="dark"
                :content="bb[o] ? bb[o].cont : ''"
                placement="top"
              >
                <p class="bb-i-t">{{ bb[o] ? bb[o].name : "空" }}</p>
              </el-tooltip>
              <p class="bb-i-n" v-if="bb[o]">{{ bb[o] ? bb[o].num : "" }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="zb">
        <p class="title">[装备]</p>
        <div class="zbc">
          <div class="zb-i" v-for="(i, o) in zb" :key="o">
            <el-tooltip effect="dark" placement="top">
              <div class="" slot="content">
                <p>【{{ i.name }}】（{{ i.bw }}）</p>
                <p>
                  <span v-if="i.smz">【生命值：+{{ i.smz }}】</span
                  ><span v-if="i.mfz">【魔法值：+{{ i.mfz }}】</span>
                </p>
                <p>
                  <span v-if="i.gjl1 && i.gjl2">
                    【攻击力：+ ({{ i.gjl1 }}-{{ i.gjl2 }})】</span
                  >
                  <span v-if="i.fsqd1 && i.fsqd2">
                    【法术强度：+ ({{ i.fsqd1 }}-{{ i.fsqd2 }})】</span
                  >
                </p>
                <p>
                  <span v-if="i.hj">【护甲：+{{ i.hj }}】</span>
                  <span v-if="i.mk">【魔抗：+{{ i.mk }}】</span>
                </p>
                <p>
                  <span v-if="i.bjl">【暴击率：+{{ i.bjl }}%】</span>
                  <span v-if="i.bjsh">【暴击伤害：+{{ i.bjsh }}%】</span>
                </p>
                <p>
                  <span v-if="i.mmgjsd">
                    【每秒攻击速度：+{{ i.mmgjsd }}】</span
                  >
                  <span v-if="i.jnlqsd"
                    >【技能冷却缩减：+{{ i.jnlqsd }}%】</span
                  >
                </p>
                <p>
                  <span v-if="i.sb"> 【闪避：+{{ i.sb }}】</span>
                  <span v-if="i.ydsd"> 【移动速度：+{{ i.ydsd }}】</span>
                </p>
                <p>
                  <span v-if="i.nl"> 【耐力：+{{ i.nl }}】</span>
                  <span v-if="i.ll"> 【力量：+{{ i.ll }}】</span>
                  <span v-if="i.js"> 【精神：+{{ i.js }}】</span>
                  <span v-if="i.mj"> 【敏捷：+{{ i.mj }}】</span>
                </p>
                <p v-if="i.xk">【镶孔：{{ i.xk }}】</p>
                <p v-if="i.fjxg">【附加效果：{{ i.fjxg }}】</p>
                <p v-if="i.fjjn">【附加技能：{{ i.fjjn }}】</p>
                <p>【穿戴等级：{{ i.level }}级】</p>
              </div>
              <b>{{ i.bw }}</b>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <p class="title">[被动技能]</p>
      <div class="bd">
        <div class="bd-item">
          <p>
            【孤魂（天赋技能被动）】对单个目标造成直接伤害时必定触发以下附加效果之一：
          </p>
          <p>·真精：该次攻击必定命中目标，并附加该次攻击伤害20%的真实伤害。</p>
          <p>
            ·摄魂：恢复该次攻击伤害10%的生命值。溢出部分治疗效果将转化为护盾，护盾至多为50%最大生命值，脱离战斗后护盾最多存在10秒。
          </p>
          <p>·夺魄：立即扣除目标1%当前生命值及魔法值。</p>
          <p>·太一：该次攻击无视目标20%的护甲及魔抗，且必定暴击。</p>
          <p>·影刃：立即对目标再次发起当前攻击。</p>
          <p>·驱外：将目标击退5码距离。</p>
          <p>·驾驭：对目标造成0.5秒的眩晕。</p>
        </div>
        <div class="bd-items" v-for="(i, o) in zb" :key="o">
          <p v-if="i.fjxg">{{ i.fjxg }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import zb from "./装备";
import bb from "./背包";
export default {
  data() {
    return {
      userData: {
        name: "???",
        level: 1,
        jinyan: 0,
        smz: 10,
        mfz: 10,
        gjl1: 1,
        gjl2: 1,
        fsqd1: 1,
        fsqd2: 1,
        hj: 1,
        mk: 1,
        bjl: 0,
        bjsh: 120,
        mmgjsd: 0.6,
        jnlqsd: 0,
        sb: 0,
        ydsd: 1,
        xy: 0,
        sw: 0,
        nl: 0,
        ll: 0,
        js: 0,
        mj: 0,
      },
      addDate: {
        nl: 0,
        ll: 1,
        js: 0,
        mj: 0,
      },
      zb,
      bb,
      bbsl: 5, //存储空间
    };
  },
  mounted() {
    this.getJD(); // 获取加点属性
    this.getZB(); // 获取装备属性
    this.getSX(); // 获取人物属性
  },
  methods: {
    //获取加点属性
    getJD() {
      this.userData.nl += this.addDate.nl; //耐力
      this.userData.ll += this.addDate.ll; //力量
      this.userData.js += this.addDate.js; //精神
      this.userData.mj += this.addDate.mj; //敏捷
    },
    // 获取装备属性
    getZB() {
      this.zb.map((i) => {
        if (i.bw == "武器") {
          this.userData.mmgjsd = i.mmgjsd; //武器覆盖每秒攻击次数
        }
      });
      this.zb.map((i) => {
        if (i.bw !== "武器") {
          this.userData.mmgjsd += i.mmgjsd; //每秒攻击次数
        }
        this.userData.smz += i.smz; //生命值
        this.userData.mfz += i.mfz; //魔法值
        this.userData.gjl1 += i.gjl1; //攻击力
        this.userData.gjl2 += i.gjl2; //攻击力
        this.userData.fsqd1 += i.fsqd1; //法术强度
        this.userData.fsqd2 += i.fsqd2; //法术强度
        this.userData.hj += i.hj; //护甲
        this.userData.mk += i.mk; //魔抗
        this.userData.bjl += i.bjl; //暴击率
        this.userData.bjsh += i.bjsh; //暴击伤害
        this.userData.jnlqsd += i.jnlqsd; //技能冷却缩减
        this.userData.sb += i.sb; //闪避
        this.userData.ydsd += i.ydsd; //移动速度
        this.userData.xy += i.xy; //幸运
        this.userData.nl += i.nl; //耐力
        this.userData.ll += i.ll; //力量
        this.userData.js += i.js; //精神
        this.userData.mj += i.mj; //敏捷
      });
    },
    // 获取人物属性
    getSX() {
      //生命值
      this.userData.smz +=
        this.userData.nl * 10 + this.userData.ll * 2 + this.userData.js * 2;
      //魔法值
      this.userData.mfz +=
        this.userData.nl + this.userData.ll + this.userData.js * 5;
      this.userData.hj += this.userData.ll; //护甲
      this.userData.mk += this.userData.js; // 魔抗
      this.userData.gjl1 += this.userData.ll * 2; // 最小攻击力
      this.userData.gjl2 += this.userData.ll * 2; // 最大攻击力
      this.userData.fsqd1 += this.userData.js * 2; // 最小法术强度
      this.userData.fsqd2 += this.userData.js * 2; // 最大法术强度
      this.userData.ydsd += (this.userData.mj * 3) / 100; // 移动速度
      this.userData.mmgjsd += (this.userData.mj * 2) / 100; // 攻击速度
      this.userData.bjl += this.userData.mj / 10; // 暴击率
      this.userData.sb += (this.userData.mj * 3) / 100; // 闪避
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  padding: 50px 0;
  display: flex;
  justify-content: space-around;
  .title {
    font-size: 24px;
    color: #00f;
    margin-bottom: 20px;
  }
  .left {
    width: 1300px;
    .lt {
      display: flex;
      justify-content: space-between;
      .use {
        width: 500px;
      }
      .bb {
        width: 750px;
        padding-left: 20px;
        margin-left: 20px;
        border-left: 1px solid #ccc;

        .bbc {
          display: flex;
          flex-wrap: wrap;
          max-height: 220px;
          overflow-y: auto;
          .bb-i {
            padding: 3px;
            margin: 3px;
            border-radius: 8px;
            border: 1px dashed #ccc;
            width: 60px;
            height: 60px;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            .bb-i-n {
              position: absolute;
              color: #fff;
              background-color: #00f;
              padding: 0 3px;
              border-radius: 5px;
              font-size: 12px;
              top: -3px;
              right: 60%;
            }
          }
        }
      }
    }

    .zb {
      font-size: 14px;
      margin-top: 50px;
      .zbc {
        display: flex;
        flex-wrap: wrap;
        .zb-i {
          padding: 10px;
          margin: 10px;
          border: 1px dashed #ccc;
          border-radius: 12px;
          margin-bottom: 10px;
          position: relative;
          font-size: 13px;
          b {
            color: #f00;
            display: block;
            font-size: 16px;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
          }
        }
      }
    }
  }
  .right {
    width: 500px;
    font-size: 15px;
    .bd {
      max-height: 900px;
      overflow-y: auto;

      .bd-item {
        padding: 5px;
        margin: 5px 0;
        border: 1px dashed #ccc;
        border-radius: 12px;
      }
      .bd-items p {
        padding: 5px;
        margin: 5px 0;
        border: 1px dashed #ccc;
        border-radius: 12px;
      }
    }
  }
}
</style>
